<template>
    <HeaderBar :title="$t('plan.productDetail.title')" />
    <view class="goods-detail-container main-container">
        <!-- <view class="header-wrap">
            <view class="icon"><image mode="widthFix" src="@/static/icon/user.jpg" /></view>
            <view class="title">MONOPOLY GO!</view>
            <view class="down">
                <view class="item"><image  src="@/static/icon/google.png" /></view>
                <view class="item"><image  src="@/static/icon/ios.png" /></view>
            </view>
        </view> -->
        <view class="goods-wrap">
            <image :src="detail.goodsPic" />
        </view>

        <view class="section">
            <view class="section-title">{{ detail.goodsName }}</view>
            <view class="plan-text" v-html="detail.goodsDesc"></view>
        </view>
        <view class="section">
            <view class="section-title">{{ $t('plan.productDetail.title') }}</view>
            <view class="put-wrap">
                <view class="put-item">
                    <view class="name">{{ $t('plan.productDetail.stock') }}</view>
                    <view class="price">{{ detail.goodsStock }}</view>
                </view>
                <view class="put-item">
                    <view class="name">{{ $t('plan.min') }}</view>
                    <view class="price">$ {{ detail.minPrice }}</view>
                </view>
                <view class="put-item">
                    <view class="name">{{ $t('plan.max') }}</view>
                    <view class="price">$ {{ detail.minPrice }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import HeaderBar from '@/components/HeaderBar';
import { getStorage } from '@/utils/common';

const detail = ref<any>({});

onLoad(() => {
    getLoad();
});

//初始化加载
const getLoad = () => {
    detail.value = getStorage('goodsDetail') || {};
};
</script>

<style lang="scss">
.goods-detail-container {
    padding: 0 30rpx 40rpx;
    .header-wrap {
        display: flex;
        flex-flow: column;
        align-items: center;
        flex-direction: column;
        background: url('@/static/icon/goods_detail_bg.png') no-repeat;
        padding: 40rpx 130rpx 60rpx;
        margin-left: -100rpx;
        width: calc(100% + 200rpx);
        .icon {
            width: 180rpx;
            height: 180rpx;
            margin-top: 80rpx;

            image {
                width: 100%;
                height: 100%;
                border-radius: 20rpx;
            }
        }
        .title {
            font-size: 42rpx;
            font-weight: 600;
            margin-top: 50rpx;
        }
        .down {
            margin-top: 50rpx;
            display: flex;
            justify-content: space-between;
            width: 100%;
            .item {
                width: calc(50% - 20rpx);
                cursor: pointer;
                image {
                    width: 100%;
                    height: 96rpx;
                }
            }
        }
    }

    .goods-wrap {
        margin-top: 40rpx;
        image {
            width: 100%;
            border-radius: 30rpx;
            max-height: 300rpx;
        }
    }

    .section {
        margin-top: 40rpx;
        .section-title {
            font-size: 32rpx;
        }
        .banner {
            margin-top: 30rpx;
            image {
                width: 100%;
            }
        }
        .plan-text {
            margin-top: 40rpx;
            font-size: 24rpx;
            line-height: 34rpx;
        }
        .put-wrap {
            margin-top: 40rpx;
            background: #f0f2f5;
            border-radius: 22rpx;
            padding: 20rpx 30rpx;
            .put-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 24rpx;
                padding: 20rpx 0;
                .name {
                    width: 25%;
                }
                .price {
                    width: 60%;
                    word-break: break-all;
                    text-align: right;
                }
            }
        }
    }
    .plan-time {
        padding: 40rpx 0;
        display: flex;
        justify-content: space-between;
        .name {
            font-size: 32rpx;
        }
        .time {
            font-size: 28rpx;
            color: #646566;
        }
    }
}
</style>
